<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Testing image 5</title>
<style>
	@import "../../../dojo/resources/dojo.css";
	@import "../../../dijit/tests/css/dijitTests.css";
</style>
<script src="../../../dojo/dojo.js" data-dojo-config="isDebug:1, async: true"></script>
<script>
require(["dojox/gfx", "dojox/gfx/matrix", "dojox/gfx/Moveable", "dojo/domReady!"], function(gfx, matrix, Moveable){
	var surface = gfx.createSurface("test", 800, 600);
	surface.whenLoaded(function(surface){
		var gridSize = 800,
			gridStep = 50;

		for(var i = 0; i <= gridSize; i += gridStep){
			surface.createLine({ x1: 0, x2: gridSize, y1: i, y2: i }).setStroke("gray");
			surface.createLine({ y1: 0, y2: gridSize, x1: i, x2: i }).setStroke("gray");
		}

		var rect1 = surface.createRect({ x: 0, y: 0, width: 300, height: 200, r: 5 }).setFill("red").setStroke("black");
		var img1  = surface.createImage({ width: 300, height: 200, src: "images/eugene-sm.jpg"}).setTransform({ dx: 50, dy: 50 });
		var rect2 = surface.createRect({ x: 100, y: 100, width: 300, height: 200, r: 5 }).setFill("yellow").setStroke("black");
		var img2  = surface.createImage({ width: 300, height: 200, src: "images/eugene-sm.gif"}).setTransform({ dx: 150, dy: 150 });
		var rect3 = surface.createRect({ x: 200, y: 200, width: 300, height: 200, r: 5 }).setFill("green").setStroke("black");
		var img3  = surface.createImage({ width: 300, height: 200, src: "images/eugene-sm.png"}).setTransform({ dx: 250, dy: 250 });
		var rect4 = surface.createRect({ x: 300, y: 300, width: 300, height: 200, r: 5 }).setFill("blue").setStroke("black");

		new Moveable(rect1);
		new Moveable(rect2);
		new Moveable(rect3);
		new Moveable(rect4);

		new Moveable(img1);
		new Moveable(img2);
		new Moveable(img3);
	});
});
</script>
</head>
<body>
<h1>dojox.gfx Image opacity and move tests</h1>
<p>Note: Silverlight doesn't allow downloading images when run from a file system. This demo should be run from a server.</p>
<div id="test"></div>
<p>That's how images should look like (light yellow background):</p>
<p style="background-color: #ffe; padding: 1em; border: 1px solid black;">
    <img src="images/eugene-sm.jpg">
    <img src="images/eugene-sm.gif">
    <img src="images/eugene-sm.png">
</p>
</body>
</html>
